<!--
 * @Author: wangshuguang
 * @Date: 2022-03-13 20:11:33
 * @LastEditTime: 2022-04-14 14:08:35
 * @LastEditors: wangshuguang
 * @Description: 插件配置管理
-->
<template>
  <div class="infoConfig">
    <el-form ref="form" :model="form">
      <div class="leftLine title">机构信息</div>
      <el-row class="plugContent">
        <el-col :span="5">机构</el-col>
        <el-col :span="7">
          <el-select v-if="pageType == 'add'" v-model="agtObj" class="selectItem" placeholder="请选择" value-key="orgId" size="small" @change="agtChange">
            <el-option
              v-for="item in agtList"
              :key="item.orgId"
              :label="item.orgName"
              :value="item"
            />
          </el-select>
          <span v-else>{{ form.orgName }}</span>
        </el-col>
        <el-col :span="5">业务编号</el-col>
        <el-col :span="7">{{ form.orgId }}</el-col>
      </el-row>
      <div class="leftLine title">
        插件列表
      </div>
      <el-table size="medium" :data="list" border>
        <el-table-column prop="name" align="center" label="插件名称" />
        <el-table-column prop="description" align="center" label="简介" />
        <el-table-column prop="autoOpen1" align="center" label="开通后是否可关闭">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.canClose === 1" type="success">是</el-tag>
            <el-tag v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="启用/关闭" width="200">

          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isOpen"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changSwitch(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="btnList textCenter mg-t-20">
        <el-button size="small" @click="$emit('close')">取消</el-button>
        <el-button type="primary" size="small" @click="next">下一步</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { updPluginSwitch, pluginConfList, qryMarketPlugins } from '@/api/plugs'
export default {
  props: {
    infoConfig: {}
  },
  data() {
    return {
      text: '',
      form: {},
      agtObj: {},
      list: [],
      agtList: [],
      pluginCode: ''
    }
  },
  computed: {
    pageType() { return this.infoConfig.type }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const { data, type } = this.infoConfig
      const baseData = JSON.parse(JSON.stringify(data))
      if (type == 'add') {
        pluginConfList({
          pageNum: 1,
          pageSize: 1000,
          openFlag: 0
        }).then(res => {
          this.agtList = res.data.list
          console.log('res', res, this.agtList)
        })
        this.form = {
          ...baseData
        }
      } else {
        this.form = {
          ...baseData
        }
        this.list = this.infoConfig.formInfo
      }
    },
    agtChange(agt) {
      console.log('val', agt)
      this.form = {
        ...agt
      }
      this.getPlugList()
    },
    getPlugList() {
      // 获取插件列表
      qryMarketPlugins({ orgId: this.form.orgId }).then(res => {
        this.list = res.data
      })
    },
    // switch切换
    changSwitch(data) {
      console.log('aaaaa', data)
      const backEndData = {
        isOpen: data.isOpen,
        orgId: this.form.orgId,
        pluginCode: data.code
      }
      updPluginSwitch(backEndData).then(res => {
        console.log('发送成功没', res)
        if (res.succeed) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    next() {
      // console.log('list', this.list)
      if (!this.form.orgId) {
        this.$message.error('请先选择机构')
      } else if (this.list.every(plug => plug.isOpen == 0)) {
        this.$message.error('至少打开一个插件')
      } else {
        this.$emit('next', {
          ...this.form,
          orgId: this.form.orgId,
          list: this.list
        })
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.infoConfig{
  padding: 30px;
  .title,
  /deep/.title{
    font-size: 15px;
    color: #000;
    margin: 30px 0;
  }
  .numInput,
  /deep/.numInput{
    width: 100px;
    margin: 0 10px;
  }
  .formItemLabel,
  /deep/.formItemLabel{
    width: 100px;
    display: inline-block;
  }

  .plugContent,
  /deep/.plugContent{
    padding-left: 30px;
    line-height: 40px;
    .selectItem{
      width: 150px;
    }
  }

}
</style>
